@import "vars"
@import "fonts"
@import "libs"

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary, time, mark, audio, video
	margin: 0
	padding: 0
	border: 0
	font-size: 100%
	font: inherit
	vertical-align: baseline

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
	display: block

body
	line-height: 1

ol, ul
	list-style: none

blockquote, q
	quotes: none

blockquote:before, blockquote:after,
q:before, q:after
	content: ''
	content: none

table
	border-collapse: collapse
	border-spacing: 0

//.grid-items
//	border: 1px solid black

body
	font-size: 18px
	font-family: $font-body

h1, h2, h3, h4, h5, h6
	font-family: $font-heading
	font-weight: 600
	color: $color-neutral-dark

.main-container
	display: grid
	grid-template-columns: 1fr
	grid-template-rows: repeat(3, auto)
	grid-row-gap: $gutter

.backgraund-top
	background: url("../img/bg-hero-desktop.svg") $color-neutral-pale no-repeat top center

.width-max
	max-width: 1440px
	width: 100%
	margin: 0 auto

header
	display: grid
	grid-template-columns: repeat(2, 1fr)
	grid-column-gap: 70px
	grid-auto-rows: auto
	padding: 40px 80px 60px 78px
	.logo
		margin-bottom: 40px
		max-width: 198px
		height: auto
		padding-top: 10px
	.btn-header
		text-align: right
		font-size: 14px
		button
			height: 48px
			width: 200px
			background: white
			font-weight: bold
			border-radius: 50px
			border: none
			color: $color-neutral-dark
			padding-right: 1px
			transition: all 600ms ease
			&:hover
				border: 1px solid $color-neutral-pale
				background: $color-neutral-dark
				color: $color-neutral-pale
	.header-text
		display: grid
		grid-template-columns: 1fr
		grid-template-rows: 149px 113px auto
		//margin-top: 123px
		margin-top: 10vh
		h1
			font-size: 40px
			line-height: 150%
		p
			color: $color-neutral-dark
			line-height: 1.5em
		.btn-get
			width: 17vw
			height: 50px
			border-radius: 40px
			border: none
			background-color: $color-primary
			color: $color-neutral-pale
			font-weight: bold
			font-size: 15px
			transition: all 600ms ease
			&:hover
				background: $color-neutral-pale
				color: $color-primary
				border: 1px solid $color-primary
	.header-img
		margin-top: 30px
	img
		width: 100%
		height: auto

.content
	display: grid
	grid-template-columns: auto
	grid-row-gap: 38px
	margin: 130px 105px 160px 100px
	.border-sec
		border: none
		border-radius: 15px
		box-shadow: 2px 2px 10px $color-neutral-pale, -2px -2px 10px $color-neutral-pale
		&:hover
			box-shadow: 0 10px 10px darken($color-neutral-pale, 5%), 0 -10px 10px darken($color-neutral-pale, 5%), 10px 0 10px darken($color-neutral-pale, 5%), -10px 0 10px darken($color-neutral-pale, 5%)
			transition: all .4s ease
		h2
			display: inline-block
			margin-bottom: 20px
			font-size: 1.6em
			transition: all .5s linear
			&:hover
				border-bottom: 3px solid $color-neutral-dark
		p
			line-height: 1.5
	.content-item1
		display: grid
		grid-template-columns: minmax(auto, 485px) minmax(auto, 411px)
		grid-template-rows: auto
		grid-column-gap: 10%
		padding: 60px 30px 60px 125px
		.sec-item1
			display: grid
			grid-template-columns: auto
			align-self: center
		img
			width: 100%
			height: auto
	.content-item2
		display: grid
		grid-template-columns: minmax(auto, 415px) minmax(auto, 500px)
		grid-template-rows: auto
		grid-column-gap: 15%
		padding: 60px 30px 60px 125px
		img
			width: 100%
			height: auto
		.sec-item2
			align-self: center
	.content-item3
		display: grid
		grid-template-columns: minmax(auto, 480px) minmax(auto, 420px)
		grid-template-rows: auto
		grid-column-gap: 15%
		padding: 60px 30px 60px 124px
		.sec-item3
			align-self: center
		img
			width: 100%
			height: auto

.etc-block
	display: grid
	grid-template-columns: auto
	width: 47%
	height: 280px
	background: white
	border: none
	border-radius: 20px
	position: relative
	top: -15vh
	margin: 0 auto
	text-align: center
	box-shadow: 2px 2px 10px $color-neutral-pale, -2px -2px 10px $color-neutral-pale
	align-content: space-evenly
	&:hover
		box-shadow: 0 6px 6px darken($color-neutral-pale, 5%), 0 -6px 6px darken($color-neutral-pale, 5%), 6px 0 6px darken($color-neutral-pale, 5%), -6px 0 6px darken($color-neutral-pale, 5%)
		transition: all .4s ease
	h1
		font-size: 23px
	button
		width: 400px
		height: 80px
		justify-self: center
		background: $color-primary
		border-radius: 40px
		border: none
		color: $color-neutral-pale
		font-weight: bold
		&:hover
			background: white
			border: 1px solid $color-primary
			color: $color-primary
			transition: background .4s ease

.background-footer
	background: $color-neutral-dark

.footer
	color: $color-neutral-pale
	a
		color: $color-neutral-pale
	.footer-item1
		display: grid
		grid-template-columns: repeat(3, 1fr)
		grid-template-rows: auto
		.logo-footer
			grid-column: 1 / 4
			margin-bottom: 30px
		ul
			display: flex
			margin-bottom: 30px
			li
				padding-right: 20px
		.location
			line-height: 1.5
		.menu-footer
			display: flex
			justify-content: space-evenly
			ul
				flex-direction: column
				li
					padding-bottom: 22pt
		.social-icon
			justify-self: center
			svg
				width: 30px
		.copyright
			grid-column: 1 / 4
			justify-self: end

.attribution
	font-size: 11px
	text-align: center
	&a
		color: hsl(228, 45%, 44%)

@import "media" // Always at the end